<template>
	<view class="tabbarpage-container">
		<!--胶囊上方-->
		<view :style="{'padding-top': statusBarHeight}"></view>
		<!--胶囊-->
		<view class="page-header" :style="{'height': capsuleHeight}">
			AI英语错题侦探
		</view>
		<!--主体-->
		<view class="tabbarpage-body">
			<view class="absolute-all-container">
				<!-- 老界面 -->
				<view v-if="isTraditionalInterface">
					<GreetingsCom @changeUIMode="changeUIMode" />
					<DailyTargetCom />
					<StudyActivityCom />
				</view>
				<!-- 新界面 -->
				<view class="absolute-all-container" v-else>
					<NewUICom class="absolute-all-container" @changeUIMode="changeUIMode" />
				</view>
			</view>

		</view>
		<!--Tabbar-->
		<TabbarCom :tabbarIndex="0" class="tabbarpage-tabbar" />
	</view>

</template>

<script setup>
	import TabbarCom from '@/components/TabbarCom.vue'
	import { onBeforeMount, ref } from 'vue';
	import { globalProps } from '@/js/global.js'
	import DailyTargetCom from '@/pages/HomePage/components/DailyTargetCom.vue'
	import GreetingsCom from '@/pages/HomePage/components/GreetingsCom.vue'
	import StudyActivityCom from '@/pages/HomePage/components/StudyActivityCom.vue'
	import NewUICom from './components/NewUICom.vue';
	
	const statusBarHeight = ref(globalProps.statusBarHeight)
	const capsuleHeight = ref(globalProps.capsuleHeight)
	onBeforeMount(()=>{
		uni.hideTabBar({
			animation: false
		})
	})

	const isTraditionalInterface = ref(false)
	const changeUIMode = ()=>{
		isTraditionalInterface.value = !isTraditionalInterface.value
		// uni.showToast({
		// 	title: '已切换',
		// })
	}
</script>

<style>
	@import "@/css/global.css";
	@import "@/css/animation.css";
	.absolute-all-container{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}
	page{
		color:white;
	}
	
	
</style>
